<template>
	<!-- 知识竞赛答题详情 显示正确答案 -->
	<view class="knowledge-view" :style="`min-height: ${windowHeight}px`">
		<view class="countdown">
			<up-count-down :time="6 * 1000" format="sss后返回活动页" @change="changeCountDown"></up-count-down>
		</view>
		<view class="centent-view">
			<view v-for="(item, index) in questionData.activityContestQuestionVOList" :key="index">
				<view class="item-view">
					<view class="sort-view" style="">
						<span style="font-size: 38rpx;">{{index+1}}</span>/{{questionData.activityContestQuestionVOList.length}} 
						{{questionTypeData[item.questionType]}}
					</view>
					<view class="question-title">{{item.questionTitle}}</view>
					<view class="option-view" v-if="item.questionType == 0">
						<up-radio-group v-model="item.userAnswerQuestion" activeColor="#F60303" disabled>
							<view v-for="(quest, i) in item.activityContestQuestionOptionList" :key="quest.id" style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio 
								 :name="quest.id"
								 :label="`${indexToABC(i)}、${quest.optionTitle}`"></up-radio>
							</view>
						</up-radio-group>
					</view>
					<view class="option-view" v-if="item.questionType == 1">
						<up-checkbox-group
							v-model="item.userAnswerQuestion"
							placement="column"
							activeColor="#F60303"
							disabled
						>
							<up-checkbox
								:customStyle="{marginBottom: '8px'}"
								v-for="(quest, i) in item.activityContestQuestionOptionList"
								:key="i"
								:label="`${indexToABC(i)}、${quest.optionTitle}`"
								:name="quest.id"
							>
							</up-checkbox>
						</up-checkbox-group>
					</view>
					<!-- userAnswerJudgment -->
					<view class="option-view" v-if="item.questionType == 2">
						<up-radio-group v-model="item.userAnswerJudgment" activeColor="#F60303" disabled>
							<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio :name="1" label="对"></up-radio>
							</view>
							<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
								<up-radio :name="0" label="错"></up-radio>
							</view>
						</up-radio-group>
					</view>
					<!-- 显示正确答案 v-if="whetherCorrectAnswer"-->
					<view style="color: #D81E06;margin-top: 30rpx;">正确答案：
						<text v-for="(an, anIndex) in item.answer" :key="anIndex">{{an}}</text>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	export default {
		data() {
			return {
				bg: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%AB%9E%E8%B5%9B%E7%AD%94%E9%A2%98%E9%A1%B5%E9%9D%A2/u7.png',
				questionData: {},
				userAnswerQuestionBankList: [],
				userAnswerQuestion: '',
				windowHeight: 0,
				knowledgeId: '',
				walkFeatureId: '',
				briskWalkId: '',
				whetherRandom: 0,
				currentIndex: 0, // currentIndex == null || 
				questionTypeData: ['单选题', '多选题', '判断题'],
				whetherShowAnswer: null, // 答错后是否显示正确答案,0 不显示，1显示
				isAnswer: false,
				options: {}
			}
		},
		onLoad(options) { // whetherShowAnswer
			// console.log(options)
			this.options = options
			
			this.getQuestionDetail(options.walkFeatureId)
			
			this.getsize()
		},
		methods: {
			changeCountDown(e) {
				if (e.seconds == 0) {
					// 返回 brisk-walking/detail/
					uni.navigateBack({
						delta: 2
					})
					
				}
			},
			async getQuestionDetail(walkFeatureId) {
				const result = await activityApi.getEverydayQuestionDetail(walkFeatureId)
			
				result.data.forEach(item => {
					item.answer = []
					if (item.questionType == 0) { // 单选
						item.userAnswerQuestion = ''
						if (item.activityContestQuestionOptionList) {
							item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
								
								if (dict.whetherSelected = 1) {
									item.userAnswerQuestion = dict.id
								}
								
								if (dict.whetherCorrectAnswer == 1) {
									item.answer.push(this.indexToABC(dictIndex))
								}
							})
						} else {
							item.activityContestQuestionOptionList = []
						}
						
					} else if (item.questionType == 1) { // 多选
						item.userAnswerQuestion = []
						if (item.activityContestQuestionOptionList) {
							item.activityContestQuestionOptionList.forEach((dict, dictIndex) => {
								if (dict.whetherSelected = 1) {
									item.userAnswerQuestion.push(dict.id)
								}
								if (dict.whetherCorrectAnswer == 1) {
									item.answer.push(this.indexToABC(dictIndex))
								}
							})
						}
					} else { // 判断题
						item.answer.push(item.whetherCorrect==1?'对':'错')
					}
					
					
				})
				// console.log(result.data)
				this.questionData.activityContestQuestionVOList = result.data
			},
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			indexToABC(num) {
				num = num+1
				let stringName  = ''
				if(num >= 1 && num <= 26) {
					stringName = String.fromCharCode(64 + parseInt(num));
				} else {
					while(num > 26) {
						let count = parseInt(num/26);
						let remainder = num%26;
					if(remainder == 0) {
						remainder = 26;
						count--;
						stringName = String.fromCharCode(64 + parseInt(remainder)) + stringName;
					} else {
						stringName = String.fromCharCode(64 + parseInt(remainder)) + stringName;
					}
						num = count;
					}
					stringName = String.fromCharCode(64 + parseInt(num)) + stringName;
				}
				return stringName
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countdown {
		padding: 10rpx 30rpx;
		border-radius: 40rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: rgba(0, 0, 0, 0.3);
		
		:deep(text) {
			color: #fff;
		}
	}
	
	.knowledge-view {
		padding: 100rpx 30rpx;
		background-color: #d81e06;
		.header-btn {
			position: absolute;
			top: 20rpx;
			right: 0;
			width: 176rpx;
			height: 54rpx;
			font-weight: 500;
			text-align: center;
			line-height: 54rpx;
			background: rgba(0, 0, 0, 0.2);
			color: #ffffff;
			font-size: 28rpx;
			border-top-left-radius: 46rpx;
			border-bottom-left-radius: 46rpx;
			display: flex;
			justify-content: center;
			.text {
				margin-right: 10rpx
			}
		}
		.centent-view {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx 30rpx 120rpx 30rpx;
			min-height: 84vh;
			position: relative;
			.item-view {
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 30rpx;
				.sort-view {
					color: #9A9A9A;
					margin-bottom: 20rpx;
				}
				.question-title {
					// font-size: 30rpx;
					margin-bottom: 10rpx;
				}
				.option-view {
					line-height: 60rpx;
				}
			}
			.btn-view {
				position: absolute;
				bottom: 30rpx;
				left: 0;
				right: 0;
				display: flex;
				justify-content: center;
				.btn {
					width: 416rpx;
					height: 80rpx;
					font-size: 26rpx;
					color: #fff;
					text-align: center;
					line-height: 80rpx;
					background-color: #F60303;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>